<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="${gPath}/styles/dpl-min.css" rel="stylesheet"/>
    <link href="${gPath}/styles/bui-min.css" rel="stylesheet"/>
    <link href="${gPath}/styles/main.css" rel="stylesheet"/>
</head>
<body>

<!--列表页-->
<div class="container">
    <form id="searchForm" class="form-panel">
        <ul class="panel-content">
            <li>
                <span>
                    <label>店名：</label><input type="text" class="control-text" name="site.name"/>
                </span>
                <span>
                    <label>门店地址：</label><input type="text" class="control-text" name="site.address"/>
                </span>
                <span>
                    <label>联系人：</label><input type="text" class="control-text" name="site.contact"/>
                </span>
                <span>
                    <label>联系电话：</label><input type="text" class="control-text" name="site.contact_phone"/>
                </span>
                <span>
                    <label>送货地址：</label><input type="text" class="control-text" name="site.delivery_address"/>
                </span>
                <button type="button" id="btnSearch" class="button button-primary">搜索</button>
            </li>
        </ul>
    </form>
    <div class="search-grid-container">
        <div id="grid"></div>
    </div>
</div>

<!--表单页-->
<div id="ModelFormDialog" style="display: none">
    <form id="ModelForm" class="form-horizontal">
        <div class="control-group">
            <label class="control-label">店名：</label>
            <div class="controls">
                <input class="input-normal control-text" type="text" name="site.name" data-rules="{required:true}" data-messages="{required:'名称不能为空'}"/>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">门店地址：</label>
            <div class="controls">
                <input name="site.address" type="text" style="width: 600px" data-rules="{required:true}" data-messages="{required:'地址不能为空'}" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">联系人：</label>
            <div class="controls">
                <input class="input-normal control-text" type="text" name="site.contact" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">联系电话：</label>
            <div class="controls">
                <input class="input-normal control-text" type="text" name="site.contact_phone" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">邮箱：</label>
            <div class="controls">
                <input class="input-normal control-text" type="text" name="site.email" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">送货地址：</label>
            <div class="controls">
                <input name="site.delivery_address" type="text" style="width: 600px;"/>
            </div>
        </div>
        <div class="control-group" style="height: 130px;">
            <label class="control-label">备注：</label>
            <div class="controls">
                <textarea name="site.remark" style="resize: none; width: 605px; height: 100px;"></textarea>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">APP账号：</label>
            <div class="controls">
                <input class="input-normal control-text" type="text" name="account" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">渠道商：</label>
            <div class="controls">
                <select id="distributor_item" name="site.distributor_id">
                    <option value="">无</option>
                </select>
            </div>
        </div>
        <div class="row form-actions actions-bar">
            <div class="span13 offset3 ">
                <button type="submit" class="button button-primary">保存</button>
                <button type="reset" class="button">重置</button>
            </div>
        </div>
    </form>
</div>

<div id="infoDialog" style="display: none">
    <div class="search-grid-container">
        <div id="info_grid"></div>
    </div>
</div>

<!--设备详情表单页-->
<div id="InfoModelFormDialog" style="display: none">
    <form id="InfoModelForm" class="form-horizontal">
        <input type="text" name="siteMapDevice.site_id" style="display: none"/>
        <div class="control-group">
            <label class="control-label">开始日期：</label>
            <div class="controls">
                <input class="input-small calendar" type="text" data-rules="{required:true}" name="siteMapDevice.start_date" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">结束日期：</label>
            <div class="controls">
                <input class="input-small calendar" type="text" data-rules="{required:true}" name="siteMapDevice.end_date" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">设备ID：</label>
            <div class="controls">
                <input class="input-normal control-text" type="text" data-rules="{required:true}" name="siteMapDevice.device_id" />
            </div>
        </div>
        <div class="row form-actions actions-bar">
            <div class="span13 offset3 ">
                <button type="submit" class="button button-primary">保存</button>
                <button type="reset" class="button">重置</button>
            </div>
        </div>
    </form>
</div>

<script type="text/javascript" src="${gPath}/scripts/jquery/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="${gPath}/scripts/bui.js"></script>
<script type="text/javascript" src="${gPath}/scripts/treegrid-min.js"></script>
<script type="text/javascript" src="${gPath}/scripts/common/search.js"></script>
<script type="text/javascript">
    var URI = "${gPath}/clmp/dingtalk/mobility/site", MODULE='site';
    BUI.use(['common/search', 'bui/overlay', 'bui/form'], function (Search, Overlay, Form) {
        var columns = [
            {dataIndex: 'user_id', visible: false},
            {title: 'id', dataIndex: 'id', width: '10%'},
            {title: '店名', dataIndex: 'name', width: '10%'},
            {title: '门店地址', dataIndex: 'address', width: '10%'},
            {title: '联系人', dataIndex: 'contact', width: '10%'},
            {title: '联系电话', dataIndex: 'contact_phone', width: '10%'},
            {title: '邮件', dataIndex: 'email', width: '10%'},
            {title: '送货地址', dataIndex: 'delivery_address', width: '10%'},
            {title: '备注', dataIndex: 'remark', width: '10%'},
            {title: 'APP账号', dataIndex: 'user', width: '10%', renderer: function(value, obj){
                return value ? value.account : null;
            }},
            {title: '操作', dataIndex: '', width: '8%', renderer: function (value, obj){
                var editStr = '<shiro:hasPermission name="/clmp/dingtalk/mobility/site/*:post"><span class="grid-command btn-edit" title="编辑">编辑</span></shiro:hasPermission>';
                var delStr = '<shiro:hasPermission name="/clmp/dingtalk/mobility/site/*:delete"><span class="grid-command btn-del" title="删除">删除</span></shiro:hasPermission>';
                var devicesStr = '<shiro:hasPermission name="/clmp/dingtalk/mobility/site/getDeivcesBySite"><span class="grid-command btn-info" title="设备">设备详情</span></shiro:hasPermission>';
                return editStr + delStr + devicesStr;
        }}];
        var store = Search.createStore(URI, {totalProperty: 'total'});
        var gridCfg = Search.createGridCfg(columns, {tbar: {
                items: [
                    <shiro:hasPermission name="/clmp/dingtalk/mobility/site:post">
                    {text: '<i class="icon-plus"></i>新建', btnCls: 'button button-small', handler: function () {
                        loadDistributors();
                        modelFormObject.clearFields();
                        modelFormObject.set('action', URI);
                        modelFormObject.set('method', "POST");
                        modelFormDialog.show();
                    }},
                    </shiro:hasPermission>
                    {<shiro:hasPermission name="/clmp/dingtalk/mobility/site/*:delete">text: '<i class="icon-remove"></i>删除', btnCls: 'button button-small', handler: delFunction</shiro:hasPermission>}
                ]
            },
            emptyDataTpl : '<div style="padding: 20px" class="centered"><img src="${gPath}/img/nodata.png"><h2>好像还没有数据</h2></div>',
            plugins: [BUI.Grid.Plugins.CheckSelection]
        });

        var search = new Search({
            store: store,
            gridCfg: gridCfg
        });

        var grid = search.get('grid');
        //删除操作
        function delFunction() {
            var selections = grid.getSelection();
            delItems(selections);
        }

        function delItems(items) {
            var ids = [];
            BUI.each(items, function (item) {
                ids.push(item.id);
            });

            if (ids.length) {
                BUI.Message.Confirm('确认要删除选中的记录么？', function () {
                    $.ajax({
                        url: URI + "/" + ids.join("-"),
                        dataType: 'json',
                        type: 'DELETE',
                        data: {ids: ids},
                        success: function (data) {
                            if (data.status == 1) {
                                BUI.Message.Alert('操作成功');
                                search.load();
                            } else {
                                BUI.Message.Alert('删除失败！');
                            }
                        }
                    });
                }, 'question');
            }
        }

        //监听事件，删除一条记录
        grid.on('cellclick', function (ev) {
            var sender = $(ev.domTarget); //点击的Dom
            if (sender.hasClass('btn-del')) {
                delItems([ev.record])
            } else if (sender.hasClass('btn-edit')) {
                edit(ev.record);
            } else if (sender.hasClass('btn-info')) {
                info(ev.record);
            }
        });

        function edit(record) {
            loadDistributors(record);
            modelFormObject.clearFields();
            modelFormObject.set('action', URI + "/" + record.id);
            modelFormObject.set('method', "POST");
            for (var name in record) {
                modelFormObject.setFieldValue(MODULE +'.'+ name, record[name]);
            }
            if (record.user){
                modelFormObject.setFieldValue('account', record.user.account);
            }
            modelFormDialog.show();
        }

        var modelFormDialog = new Overlay.Dialog({
            title: '表单',
            width: 800,
            height: 700,
            mask: false,
            buttons: [],
            contentId: 'ModelFormDialog'
        });
        //对话框关闭事件
        modelFormDialog.on("closed", function(e){
            $('#distributor_item').find(':not(:first)').remove();
        });

        var modelFormObject = new Form.HForm({
            srcNode: '#ModelForm',
            submitType: 'ajax',
            callback: function (data) {
                if (data.status == 1) {
                    BUI.Message.Alert('操作成功');
                    modelFormDialog.close();
                    search.load();
                } else {
                    BUI.Message.Alert('操作失败:' + data.msg);
                }
            }
        }).render();

        function loadDistributors(record){
            $.getJSON("${gPath}/clmp/distributor/getAll", function(data){
                var distributorItem = $('#distributor_item');
                for (var i in data) {
                    distributorItem.append('<option value="'+ data[i].id +'" '+ (record && record.distributor_id == data[i].id ? 'selected="selected"':'') +'>'+ data[i].name +'</option>')
                }
            }, "json");
        }

        /***************************************设备详情************************************/
        var infoGrid, infoSearch, infoColumns, infoStore, isInitialized = false;
        var INFO_URI = "${gPath}/clmp/dingtalk/mobility/siteMapDevice",INFO_MODULE = "siteMapDevice"
        function info(record){
            infoDialog.show();
            infoModelFormObject.clearFields();
            infoModelFormObject.setFieldValue(INFO_MODULE+'.site_id', record.id);
            if (isInitialized){//数据表格是否已经初始化过
                infoStore.load({"siteId" : record.id});
                return;
            }
            infoColumns = [{dataIndex: 'id', visible: false},
                {title: 'id', dataIndex: 'device_id', width: '5%'},
                {title: '设备码', dataIndex: 'mac', width: '20%'},
                {title: '昵称', dataIndex: 'nick_name', width: '10%'},
                {title: '欢迎语', dataIndex: 'welcomes', width: '20%'},
                {title: '批次号', dataIndex: 'batch_num', width: '10%'},
                {title: '开始日期', dataIndex: 'start_date', width: '10%'},
                {title: '结束日期', dataIndex: 'end_date', width: '10%'},
                {title: '操作', dataIndex: '', width: '10%', renderer: function (value, obj) {
                    var editStr = '<shiro:hasPermission name="/clmp/dingtalk/mobility/siteMapDevice/*:post"><span class="grid-command btn-edit" title="编辑">编辑</span></shiro:hasPermission>';
                    var delStr = '<shiro:hasPermission name="/clmp/dingtalk/mobility/siteMapDevice/*:delete"><span class="grid-command btn-del" title="删除">删除</span></shiro:hasPermission>';
                    return editStr + delStr;
            }}];
            infoStore = Search.createStore("${gPath}/clmp/site/getDeivcesBySite", {
                params : {"siteId" : record.id},
                totalProperty : 'total'
            });
            var infoGridCfg = Search.createGridCfg(infoColumns, {tbar:{
                items : [
                    <shiro:hasPermission name="/clmp/dingtalk/mobility/siteMapDevice:post">
                    {
                        text : '<i class="icon-plus"></i>添加',
                        btnCls : 'button button-small',
                        handler : function() {
                            infoModelFormObject.set('action',INFO_URI);
                            infoModelFormObject.set('method',"POST");
                            infoModelFormDialog.show();
                        }
                    },
                    </shiro:hasPermission>
                    {
                    <shiro:hasPermission name="/clmp/dingtalk/mobility/siteMapDevice/*:delete">
                    text : '<i class="icon-remove"></i>删除',
                    btnCls : 'button button-small',
                    handler : delInfoFunction
                    </shiro:hasPermission>
                }]},
                emptyDataTpl : '<div style="padding: 20px" class="centered"><img src="${gPath}/img/nodata.png"><h2>好像还没有数据</h2></div>',
                plugins : [ BUI.Grid.Plugins.CheckSelection ]
            });
            infoSearch = new Search({
                store : infoStore,
                autoSearch : true,
                gridId : 'info_grid',
                gridCfg : infoGridCfg
            });
            infoGrid = infoSearch.get('grid');
            infoGrid.on('cellclick', function (ev) {
                var sender = $(ev.domTarget); //点击的Dom
                if (sender.hasClass('btn-del')) {
                    delInfoItems([ev.record]);
                } else if (sender.hasClass('btn-edit')) {
                    editInfo(ev.record);
                }
            });
            isInitialized = true;
        }

        //设备详情对话框
        var infoDialog = new Overlay.Dialog({
            title : '设备详情',
            width : 1100,
            height : 600,
            contentId : 'infoDialog',
            buttons: []
        });

        var infoModelFormDialog = new Overlay.Dialog({
            title: '设备详情',
            width: 600,
            height: 300,
            mask: true,
            buttons: [],
            contentId: 'InfoModelFormDialog'
        });

        var infoModelFormObject = new Form.HForm({
            srcNode: '#InfoModelForm',
            submitType: 'ajax',
            callback: function (data) {
                if (data.status == 1) {
                    BUI.Message.Alert('操作成功');
                    infoModelFormDialog.close();
                    infoStore.load();
                } else {
                    BUI.Message.Alert('操作失败 ' + data.msg);
                }
            }
        }).render();

        function editInfo(record) {
            infoModelFormObject.clearFields();
            infoModelFormObject.set('action', INFO_URI + "/" + record.id);
            infoModelFormObject.set('method', "POST");
            for (var name in record) {
                infoModelFormObject.setFieldValue(INFO_MODULE +'.' + name, record[name]);
            }
            infoModelFormObject.setFieldValue(INFO_MODULE+'.site_id', record.id);
            infoModelFormDialog.show();
        }

        function delInfoFunction() {
            var selections = infoGrid.getSelection();
            delInfoItems(selections);
        }

        function delInfoItems(items) {
            var ids = [];
            BUI.each(items, function (item) {
                ids.push(item.id);
            });

            if (ids.length) {
                BUI.Message.Confirm('确认要删除选中的记录么？', function () {
                    $.ajax({
                        url: INFO_URI +"/"+ ids.join("-"),
                        dataType: 'json',
                        type: 'DELETE',
                        data: {ids: ids},
                        success: function (data) {
                            if (data.status == 1) {
                                BUI.Message.Alert('操作成功');
                                infoStore.load();
                            } else {
                                BUI.Message.Alert('操作失败 ' + data.msg);
                            }
                        }
                    });
                }, 'question');
            }
        }
    });
</script>
</body>
</html>